@charset 'utf-8';


%flex{
	display: -webkit-flex;
	display: flex;
}
%justify-content{
	-webkit-justify-content: space-around;
	justify-content:space-around;
}
%flex-grow{
	-webkit-flex-grow:1;
	flex-grow:1;
}

// header开始
header{
	text-align: center;
	background:#91D4DA;
	height: 45px;
	line-height: 45px;
	color: #fff;
	font-size: 20px;
	a{
		float: left;
		color: #fff;
		margin-left:18px;
	}
	h1{
		padding-right:60px;
	}
}
// header结束

//nav开始
nav{
	ul{
		@extend %flex;
		@extend %justify-content;
		li{
			padding: 12px;
			@extend %flex-grow;
			a{
				display: block;
				text-align: center;
				color: #7D7D7D;
				font-weight:bold;
				font-size:18px;
			}
		}
		.active{
			border-bottom: 4px solid #91D4DA;
		}
	}
} 
//nav结束 
.pic{
	img{
		width: 100%;
	}
}

.label{
	@extend %flex;
	@extend %justify-content;
	padding:5px;
	li{
		figure{
			text-align: center;
			img{
				width: 67%;
			}
			h2{
				text-align: center;
				color: #555;
				padding:5px;
				font-size: 1.5em;
			}
		}
	}
}


.columns{
	.wrap{
		@extend %flex;
		background:#F6F6F6;
		text-align: center;
		justify-content: space-between;
		border-bottom: 25px solid #f6f6f6;
		& > div{
			width: 30%;
			background:#fff;
			@extend %flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			img{
				width: 100%;
				margin:auto;
			}
			h2{
				width: 100%;
				font-size:25px;
			}
			h3{
				width: 100%;
				color:#666;
			}
		}
	}
}

section{
	padding: 5px;
	border-bottom: 20px solid #ccc;
	h2{
		font-size: 22px;
		color: #B7B7B7;
	}
	& > div{
		@extend %flex;
		justify-content: space-between;
		.pic{
			width: 30%;
			@extend %flex;
			flex-direction: column;
			img{
				width: 100%;
				justify-content: space-between;
				margin:5px;
				border: 1px solid #FDB52B;
			}
		}
		.list{
			width: 65%;
			@extend %flex;
			flex-wrap: wrap;
			div{
				width: 45%;
				@extend %flex;
				justify-content: center;
				align-items:center;
				margin:5px;
				background:#ccc;
				font-weight: bold;
			}
		}
	}
}

.section{
	@extend %flex;
	flex-direction: column;
	.portrait{
		@extend %flex;
		flex-direction: column;
		figure{
			@extend %flex;
			justify-content: space-between;
			& > div{
				width: 30%;
				img{
					width: 100%;
				}
			}
			
			figcaption{
				width: 65%;
				@extend %flex;
				flex-direction: column;
				justify-content: space-between;
				p{
					font-size: 17px;
					color: #ccc;
				}
			}
		}
	}
	.transverse{
		@extend %flex;
		flex-direction: column;
		& > div{
			@extend %flex;
			justify-content: space-between;
			& > div{
				width: 30%;
				img{
					width: 100%;
				}
			}
		}
		p{
			font-size: 17px;
			color: #ccc;
		}
	}
}